<template>
	<!-- <view> -->
	<ge-page id="ge-page" :vanNavBarObj="vanNavBarObj" :safeAreaBottom="false">
		<van-search :value="keywords" shape="round" @search="search" placeholder="搜索" />
		<view>
			<van-button id="van-button" type="primary" @click="showDialog">弹出框</van-button>
		</view>
		<view>
			<van-button type="info" @click="showToast">轻提示</van-button>
		</view>
		<van-picker show-toolbar title="标题" :columns="columns" />
		<!-- <van-calendar :show="true" /> -->
		<van-rate :value="rate" @change="rateChange" />
		<van-field :value="value" placeholder="请输入用户名" :border="false" @change="inputChange" />
		<van-button @click="testVuex" type="success">测试vuex</van-button>
		
		<!-- TabBar模式切换 -->
		<view class="tabbar-switch-section">
			<view class="section-title">TabBar模式切换</view>
			<view class="current-mode">
				当前模式: {{currentTabBarMode === 'native' ? '原生TabBar' : '自定义TabBar'}}
			</view>
			<van-button @click="switchTabBarMode" type="warning" size="small">
				切换到{{currentTabBarMode === 'native' ? '自定义' : '原生'}}TabBar
			</van-button>
		</view>
		
		<!-- 登录组件演示 -->
		<view class="login-demo-section">
			<view class="section-title">登录组件演示</view>
			<view class="demo-description">
				展示三种登录方式：手机号登录、用户名登录、微信登录
			</view>
			<van-button @click="goToLoginDemo" type="primary" size="small">
				查看登录组件演示
			</van-button>
		</view>
		
		<!-- 服务分类页面 -->
		<view class="category-demo-section">
			<view class="section-title">服务分类</view>
			<view class="demo-description">
				家电维修、居家服务、数码产品等多种分类服务
			</view>
			<van-button @click="goToCategory" type="success" size="small">
				查看服务分类
			</van-button>
		</view>
	</ge-page>
	<!-- </view> -->
</template>

<script>
	import { TabBarManager, TabBarMode } from '@/utils/tabbar.js'
	
	export default {
		data() {
			return {
				keywords: '',
				columns: ['杭州', '宁波', '温州', '嘉兴', '湖州'],
				vanNavBarObj: {
					title: '首页',
					hideLeftArrow: true
				},
				value: '',
				rate: 2,
				currentTabBarMode: TabBarManager.getMode()
			}
		},
		created() {
			// uni.post('v1/banner/getBannerList').then((res) => {
				
			// })
		},
		methods: {
			search(e) {
				console.log(e)
			},
			showDialog() {
				// console.log(uni.dialog)
				uni.dialog.confirm({
						title: '标题',
						message: '弹窗内容',
					})
					.then(() => {
						// on confirm
					})
					.catch(() => {
						// on cancel
					});
			},
			showToast() {
				uni.toast('轻提示！');
			},
			inputChange(e) {
				uni.toast(e.detail)
				this.value = e.detail
			},
			rateChange(e) {
				uni.toast(e.detail)
				this.rate = e.detail
			},
			testVuex(){
				this.$store.dispatch("getUserInfo")
			},
			/**
			 * 切换TabBar模式
			 */
			switchTabBarMode() {
				uni.dialog.confirm({
					title: '切换TabBar模式',
					message: `确定要切换到${this.currentTabBarMode === 'native' ? '自定义' : '原生'}TabBar吗？`,
				})
				.then(() => {
					TabBarManager.toggleMode()
				})
				.catch(() => {
					// 用户取消
				});
			},
			
			/**
			 * 跳转到登录组件演示页面
			 */
			goToLoginDemo() {
				uni.navigateTo({
					url: '/pages/login/demo'
				})
			},
			
			/**
			 * 跳转到服务分类页面
			 */
			goToCategory() {
				uni.navigateTo({
					url: '/pages/category/category'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.tabbar-switch-section,
.login-demo-section,
.category-demo-section {
	margin: 20px;
	padding: 20px;
	background: #f8f8f8;
	border-radius: 8px;
	
	.section-title {
		font-size: 16px;
		font-weight: bold;
		margin-bottom: 10px;
		color: #333;
	}
	
	.current-mode,
	.demo-description {
		margin-bottom: 15px;
		color: #666;
		font-size: 14px;
	}
}
</style>
